<template>
  <div class="task-wrapper" :style="{ 'height': documentClientHeight + 'px' }">
    <div class="left">
      <Menu :menuList="menuList" @selectMenu="selectTab">
        <div v-if="currentMenuIndex === menuList.length">
          <el-form label-position="top" style="padding: 0 20px;">
            <el-form-item label="筛选版块">
              <el-select :multiple="true" :filterable="true" v-model="plateIds" @change="getProjectList()" placeholder="请选择版块">
                <el-option style="width: 200px;" v-for="item in plateArr" :key="item.id" :label="item.plateName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="筛选项目">
              <el-select :multiple="true" :filterable="true" v-model="projectIds"  @change="getList()" placeholder="请选择项目">
                <el-option style="width: 200px;" v-for="item in projectArr" :key="item.id" :label="item.taskName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </Menu>
    </div>
    <div class="right">
      <div class="content-header">
        {{menuList[currentMenuIndex-1].name}}
      </div>
      <div class="content-wrapper">
        <div class="content">
          <p>概况</p>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="项目名称" prop="projectName" min-width="180" align="center"></el-table-column>
            <el-table-column label="任务数" prop="totalAmount" min-width="120" align="center"></el-table-column>
            <el-table-column label="未完成" prop="uncompleteAmout" min-width="120" align="center"></el-table-column>
            <el-table-column label="已完成" prop="completeAmount" min-width="120" align="center"></el-table-column>
            <el-table-column label="完成率" prop="completePercent" min-width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.completePercent.toFixed(0)}}%
              </template>
            </el-table-column>
          </el-table>
          <p>未完成</p>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="项目名称" prop="projectName" min-width="140" align="center"></el-table-column>
            <el-table-column label="待指派" prop="unassignAmount" min-width="90" align="center"></el-table-column>
            <el-table-column label="待完成" prop="undoneAmount" min-width="90" align="center"></el-table-column>
            <el-table-column label="待确认" prop="uncomfirmAmount" min-width="90" align="center"></el-table-column>
            <el-table-column label="待办总数" prop="cutoffAmount" min-width="90" align="center"></el-table-column>
            <!-- <el-table-column label="今日截止" prop="completePercent" min-width="90" align="center"></el-table-column> -->
            <el-table-column label="已逾期" prop="overdueAmount" min-width="90" align="center"></el-table-column>
            <el-table-column label="逾期率" prop="overduePercent" min-width="90" align="center">
              <template slot-scope="scope">
                {{scope.row.overduePercent.toFixed(0)}}%
              </template>
            </el-table-column>
            <el-table-column label="逾期时长（小时）" prop="overdueAllhour" min-width="90" align="center"></el-table-column>
          </el-table>
          <p>已完成</p>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="项目名称" prop="projectName" min-width="180" align="center"></el-table-column>
            <el-table-column label="应该完成" prop="shouldcompleteAmount" min-width="90" align="center"></el-table-column>
            <el-table-column label="实际完成" prop="uncompleteAmout" min-width="90" align="center">
              <el-table-column label="提前完成" prop="aheadcompleteAmount" min-width="90" align="center"></el-table-column>
              <el-table-column label="按时完成" prop="ontimecompleteAmount" min-width="90" align="center"></el-table-column>
              <el-table-column label="逾期完成" prop="overduecompleteAmount" min-width="90" align="center"></el-table-column>
              <el-table-column label="完成总数" prop="completeAmount" min-width="90" align="center"></el-table-column>
              <el-table-column label="逾期率" prop="overduecompletePercent" min-width="90" align="center">
                <template slot-scope="scope">
                  {{scope.row.overduecompletePercent.toFixed(0)}}%
                </template>
              </el-table-column>
              <el-table-column label="逾期时长（小时）" prop="overduecompleteAllhour" min-width="90" align="center"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Menu from './component/Menu'

export default {
  data() {
    return {
      documentClientHeight: '',
      currentMenuName: '按项目统计',
      menuList: [{
        index: 1,
        icon: 'el-icon-notebook-2',
        isFolder: true,
        name: '按项目统计'
      },{
        index: 2,
        name: '我关注的'
      },{
        index: 3,
        name: '我管理的'
      },{
        index: 4,
        name: '我负责的'
      },{
        index: 5,
        icon: 'el-icon-notebook-1',
        isFolder: true,
        name: '按版块统计'
      }],
      addOrUpdateVisible: false,
      tableData: [],
      currentMenuIndex: 1,
      plateIds: [],
      projectIds: [],
      plateArr: [],
      projectArr: []
    }
  },
  components: {
    Menu
  },
  methods:{
    selectTab(currentMenuIndex, something, item) {
      if (currentMenuIndex != this.currentMenuIndex){
        this.currentMenuIndex = currentMenuIndex;
        if(this.currentMenuIndex === 1) {
          this.getProject(1)
        }else if(this.currentMenuIndex === 2) {
          this.getProject(2)
        }else if(this.currentMenuIndex === 3) {
          this.getProject(3)
        }else if(this.currentMenuIndex === 4) {
          this.getProject(4)
        }else if(this.currentMenuIndex === 5) {
          this.getModule(1)
        }else if(this.currentMenuIndex === this.menuList.length) {
          this.getList()
        }else {
          this.getModule(2, item.plateId)
        }
      }
    },
    async getProject(type) {
      this.tableData = await this.$httpN.postB('division/statistics/statisticsByProject',  {searchType: type})
    },
    async getModule(type, plateId) {
      this.tableData = await this.$httpN.postB('division/statistics/statisticsByPlate',  {searchType: type, plateIds: plateId})
    },
    async getList() {
      this.tableData = await this.$httpN.postB('division/statistics/statisticsByCustomize',  {plateIds: this.plateIds.join(','), projectIds: this.projectIds.join(',')})
    },
    async getProjectList() {
      let projectResult = await this.$httpN.postB('division/task/filterProjectList', {searchType: 3, limit: 999, plateIds: this.plateIds.join(',')});
      let projectResult2 = await this.$httpN.postB('division/task/filterProjectList', {searchType: 6, limit: 999, plateIds: this.plateIds.join(',')});
      this.projectArr = [...projectResult.list, ...projectResult2.list];
      this.projectIds = [];
      await this.getList();
    }
  },
  async mounted() {
    this.documentClientHeight = document.documentElement['clientHeight'] - 50
    window.onresize = () => {
      this.documentClientHeight = document.documentElement['clientHeight'] - 50
    }
    let projectResult = await this.$httpN.postB('division/task/projectList', {searchType: 3, limit: 999});
    let projectResult2 = await this.$httpN.postB('division/task/projectList', {searchType: 6, limit: 999});
    this.projectArr = [...projectResult.list, ...projectResult2.list];
    let ModuleResult = await this.$httpN.postB('division/plate/list', {participateType: 2, limit: 999});
    let ModuleResult2 = await this.$httpN.postB('division/plate/archiveList', {limit: 999});
    ModuleResult.list.forEach(item => {
      let idx = this.menuList.length + 1;
      this.menuList.push({
        index: idx,
        name: item.plateName,
        plateId: item.id
      })
    })

    ModuleResult2.list.forEach(item => {
      let idx = this.menuList.length + 1;
      this.menuList.push({
        index: idx,
        name: item.plateName,
        plateId: item.id
      })
    })

    this.menuList.push({
      index: this.menuList.length + 1,
      icon: 'el-icon-search',
      isFolder: true,
      name: '自定义'
    })

    this.plateArr = [...ModuleResult.list, ...ModuleResult2.list];
    this.tableData = await this.$httpN.postB('division/statistics/statisticsByProject',  {searchType: 1})
  }
}
</script>

<style lang="scss" scoped>
  .task-wrapper .left::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    scrollbar-arrow-color:red;
  }
  .task-wrapper .left::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #DEDEDE;
    background: rgba(0,0,0,0.2);
    scrollbar-arrow-color:red;
  }
  .task-wrapper .left::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #F5F5F5;
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }


  .task-wrapper .right .content-wrapper .content::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    scrollbar-arrow-color:red;
  }
  .task-wrapper .right .content-wrapper .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #DEDEDE;
    background: rgba(0,0,0,0.2);
    scrollbar-arrow-color:red;
  }
  .task-wrapper .right .content-wrapper .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #F5F5F5;
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }
  .task-wrapper{
    display:flex;
    .left{
      width: 250px;
      min-width: 250px;
      height: 100%;
      z-index: 1;
      background: #FFF;
      box-shadow: 3px 0 4px #F0F0F0;
      overflow: auto;
    }
    .right{
      width: calc(100% - 250px);
      .content-header{
        line-height: 50px;
        background: #FFF;
        font-size: 16px;
        font-weight: bold;
        padding-left:25px;
        box-shadow: 0 3px 4px #F0F0F0;
      }
      .content-wrapper{
        height: calc(100% - 50px);
        padding: 20px;
        .content{
          overflow-y: auto;
          z-index: 2;
          height: 100%;
          background: white;
          box-shadow: 4px 4px 4px rgb(221, 221, 221);
          padding: 20px;
          p{
            font-weight: bold;
          }
        }
      }
    }
  }
</style>